<template>
  <div class="Mocile-page">
    <!-- 头部搜索 -->
    <!-- <van-nav-bar title="千尺云购" right-text="🔍" fixed/> -->
    <div class="content_location">
      <!-- 中间轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipeList" :key="item">
          <img :src="item" alt="不买别逼逼">
        </van-swipe-item>
      </van-swipe>
      <!-- 中间分类导航 -->
      <van-row style="padding: 10px;">
        <van-col span="8">
          <img src="../../assets/images/nav1.png" alt>
        </van-col>
        <van-col span="8">
          <img src="../../assets/images/nav2.png" alt>
        </van-col>
        <van-col span="8">
          <img src="../../assets/images/nav3.png" alt>
        </van-col>
        <van-col span="8">
          <img src="../../assets/images/nav4.png" alt>
        </van-col>
        <van-col span="8">
          <img src="../../assets/images/nav5.png" alt>
        </van-col>
        <van-col span="8">
          <img src="../../assets/images/nav6.png" alt>
        </van-col>
      </van-row>
      <!-- 中间虚物浏览 -->
      <van-row style="padding: 0 10px;">
        <van-col span="16">
          <van-row>
            <van-col span="12">
              <img src="../../assets/images/active1.png" alt>
            </van-col>
            <van-col span="12">
              <img src="../../assets/images/active2.png" alt>
            </van-col>
            <van-col span="12">
              <img src="../../assets/images/active4.png" alt>
            </van-col>
            <van-col span="12">
              <img src="../../assets/images/active5.png" alt>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="8">
          <img src="../../assets/images/active3.png" alt>
        </van-col>
      </van-row>
      <!-- 品牌专区 -->
      <van-row style="padding: 5px 10px">
        <van-col span="24">
          <img src="../../assets/images/title0.png" alt>
        </van-col>
        <van-col span="6">
          <img src="../../assets/images/brand1.png" alt>
        </van-col>
        <van-col span="6">
          <img src="../../assets/images/brand2.png" alt>
        </van-col>
        <van-col span="6">
          <img src="../../assets/images/brand3.png" alt>
        </van-col>
        <van-col span="6">
          <img src="../../assets/images/brand4.png" alt>
        </van-col>
        <van-col span="6">
          <img src="../../assets/images/brand5.png" alt>
        </van-col>
        <van-col span="6">
          <img src="../../assets/images/brand6.png" alt>
        </van-col>
        <van-col span="6">
          <img src="../../assets/images/brand7.png" alt>
        </van-col>
        <van-col span="6">
          <img src="../../assets/images/brand8.png" alt>
        </van-col>
      </van-row>
      <!-- 运动生活专区 -->
      <div class="activity">
        <van-row style="padding: 0 10px;">
          <van-col span="24">
            <img src="../../assets/images/title1.png" alt>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
      <!-- 女士专栏 -->
      <div class="activity">
        <van-row style="padding: 0 10px;">
          <van-col span="24">
            <img src="../../assets/images/title2.png" alt>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
      <!-- 男士专栏 -->
      <div class="activity">
        <van-row style="padding: 0 10px;">
          <van-col span="24">
            <img src="../../assets/images/title3.png" alt>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" style="padding: 3px;">
            <van-row>
              <van-col span="24">
                <img src="../../assets/images/product.jpg" alt>
              </van-col>
              <van-col span="24">adidas阿迪达斯 男式 场下休闲篮球鞋</van-col>
              <van-col span="24">
                <van-row>
                  <van-col span="12">￥666</van-col>
                  <van-col span="12">
                    <del>￥111</del>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24">
                <van-button type="primary">立即购买</van-button>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 底部标签叶 -->
    <!-- <van-tabbar v-model="active" active-color="#07c160">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="wap-nav" @click="jumpClassify">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager">会员中心</van-tabbar-item>
    </van-tabbar> -->
    <!-- 占坑 -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      swipeList: [
        require('../../assets/images/banner1.png'),
        require('../../assets/images/banner2.png'),
        require('../../assets/images/banner3.png'),
        require('../../assets/images/banner4.png')
      ]
      // active: ''
    }
  },
  methods: {
    // jumpClassify () {
    //   this.$router.push({ name: 'classify' })
    // }
  }
}
</script>

<style lang="scss" scoped>
  .van-nav-bar {
    background-color: green;
    .van-nav-bar__title {
      color: white;
    }
  }
  .van-swipe {
    img {
      width: 100%;
    }
  }
  .van-row {
    .van-col {
      img {
        width: 100%;
      }
    }
  }
  .content_location {
  }
  .activity {
    margin-bottom: 10px;
    > .van-row {
      > .van-col {
        > .van-row {
          border: 1px dashed #ccc;
          > .van-col {
            color: #666;
            padding: 5px;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            > .van-row {
              >.van-col {
                padding: 0 10px;
              }
              .van-col:first-child {
                color: red;
              }
            }
          }
        }
      }
    }
  }
</style>
